const chart = require('echarts')

function getLabel(chart_data){
  const primary_label = {
    show: true,
    formatter: function(params) {
      return params.value;
    },
    color: 'rgba(255, 255,255)'
  }
  // 设置label默认值
  let label = "";
  if (chart_data.label) {
    label = chart_data.label;
  } else {
    label = primary_label
  }
  return label;
}

let drawBar = (id, chart_data) => {
  let label =  getLabel(chart_data);

  let chartClass = chart.init(document.getElementById(id));

  chartClass.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '0',
      right: 0,
      top: '10px',
      bottom: '30px',
      containLabel: true
    },
    legend: {
      data: chart_data.legend_data,
      bottom: '0',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10
    },
    xAxis: {
      type: 'category',
      data: chart_data.axis_data,
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#adadad',
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#adadad'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#e8e8e8'],
          width: 1,
          type: 'solid'
        }
      }
    },
    label: label,
    series: chart_data.series
  });
};
let drawBarVertical = (id, chart_data) => {
  let label =  getLabel(chart_data);
  let chartClass = chart.init(document.getElementById(id));
  chartClass.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '0',
      right: '10px',
      top: '10px',
      bottom: '25px',
      containLabel: true
    },
    legend: {
      data: chart_data.legend_data,
      bottom: '0',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10
    },
    xAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#adadad'
      }
    },
    yAxis: {
      type: 'category',
      data: chart_data.axis_data,
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#adadad'
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: ['#e8e8e8'],
          width: 1,
          type: 'solid'
        }
      }
    },
    label: label,
    series: chart_data.series
  });
};
let drawLine = (id, chart_data) => {
  let label =  getLabel(chart_data);
  let chartClass = chart.init(document.getElementById(id));
  chartClass.setOption({
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '0',
      right: 0,
      top: '10px',
      bottom: '30px',
      containLabel: true
    },
    legend: {
      data: chart_data.legend_data,
      bottom: '0',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10
    },
    xAxis: {
      type: 'category',
      data: chart_data.axis_data,
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#adadad',
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#adadad'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#e8e8e8'],
          width: 1,
          type: 'solid'
        }
      }
    },
    // label: label,
    series: chart_data.series
  });
};
let drawRadar = (id, chart_data) => {
  let chartClass = chart.init(document.getElementById(id));
  chartClass.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: chart_data.legend_data,
      bottom: '0',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10
    },
    radar: chart_data.radar,
    label: chart_data.label,
    series: chart_data.series
  });
};
let drawBarProgress = (id, chart_data) => {
  let label =  getLabel(chart_data);
  let chartClass = chart.init(document.getElementById(id));
  chartClass.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '0',
      left: '0',
      right: 0,
      bottom: '30px'
    },
    legend: {
      data: chart_data.legend_data,
      bottom: '0',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10
    },
    xAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: chart_data.axis_data,
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    label: label,
    series: chart_data.series
  });
};
export default {
  drawBar,
  drawBarVertical,
  drawLine,
  drawRadar,
  drawBarProgress
}
